<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css">
    <title>求两个线段的交点</title>
</head>
<body>
    <div class="container">
        <canvas id="panel" width="700" height="700" ></canvas>
        <div class="info">
            <div class="btns">
                <button onclick="drawLine1()">绘制线段1</button>
                <button onclick="drawLine2()">绘制线段2</button>
                <button onclick="calc()">计算交点</button>
                <!-- <button onclick="clearCanvas()">清空画布</button> -->
            </div>
            <p>结果：</p>
            <textarea name="" id="res" cols="30" rows="10"></textarea>

        </div>

    </div>
    <script>
        /** @type {HTMLCanvasElement} */
        var result = document.getElementById('res')
        var x11, y11, x12, y12
        var x21, y21, x22, y22
        var line1 = []
        var line2 = []
        var canvas = document.getElementById('panel')
        var ctx= canvas.getContext('2d')
        //绘制线段1
        function drawLine1() {

            canvas.addEventListener('mousedown', function(e){
                var canvas = document.getElementById('panel')
                var ctx= canvas.getContext('2d')
                if (line1.length < 2) {
                    line1.push([e.clientX, e.clientY])
                    console.log('线段1：' + line1)
                } else {
                    return
                }
                if (line1.length == 1 ){
                    // ctx.translate(-2.5, -2.5)
                    ctx.fillRect(line1[0][0], line1[0][1], 5, 5)
                } else if (line1.length == 2) {
                    ctx.fillRect(line1[1][0], line1[1][1], 5, 5)
                    ctx.moveTo(line1[0][0], line1[0][1])
                    ctx.lineTo(line1[1][0], line1[1][1])
                    ctx.closePath()
                    ctx.strokeStyle = 'yellow'
                    ctx.stroke()
                    ctx.save()
                } else {
                    return
                }
            })
        }

        //绘制线段2 
        function drawLine2() {
            canvas.addEventListener('mousedown', function(e){
                if (line2.length < 2) {
                    line2.push([e.clientX, e.clientY])
                    console.log('线段2：'+ line2)
                } else {
                    return
                }
                if (line2.length == 1 ){
                    ctx.fillRect(line2[0][0], line2[0][1], 5, 5)
                } else if (line2.length == 2) {
                    ctx.fillRect(line2[1][0], line2[1][1], 5, 5)
                    ctx.moveTo(line2[0][0], line2[0][1])
                    ctx.lineTo(line2[1][0], line2[1][1])
                    ctx.closePath()
                    ctx.stroke()
                } else {
                    return
                }
            })
        }

        // 求交点方法
        function calc() {
            if (line1.length < 2 || line2.length < 2) {
                alert('线段未绘制完成')
            } else {
                var x1 = line1[0][0], y1 = line1[0][1], x2 = line1[1][0], y2 = line1[1][1]
                var x3 = line2[0][0], y3 = line2[0][1], x4 = line2[1][0], y4 = line2[1][1] 
                var i = findIntersection()
                result.innerHTML = i
                console.log(typeof(i))
                if(typeof(i) == "object") {
                    ctx.fillRect(i[0], i[1], 5, 5)
                }
            }
        }

        // 求交点主要算法部分
        function findIntersection() {
            var x1 = line1[0][0], y1 = line1[0][1], x2 = line1[1][0], y2 = line1[1][1]
            var x3 = line2[0][0], y3 = line2[0][1], x4 = line2[1][0], y4 = line2[1][1]
            var k1 = (y2 - y1)/(x2 - x1)
            var k2 = (y4 - y3)/(x4 - x3)
            if (k1 === k2) {
                return `两条线段平行，无交点`
            } else {
                var b1 = (x1*y2 - x2*y1)/(x1 - x2), b2 = (x3*y4 - x4*y3)/(x3 - x4)
                var Inx = (b2 - b1)/(k1 - k2), Iny = (k1*(b2 - b1))/(k1 - k2) + b1
                if ((Inx - x1)*(Inx - x2) <= 0 && (Iny - y1)*(Iny - y2) <=0 && (Inx - x3)*(Inx - x4) <= 0 && (Iny - y3)*(Iny - y4) <=0){
                    // return `交点坐标为(${Inx},${Iny})`
                    return [Inx, Iny]
                } else {
                    return `两条线段无交点，延长线交点坐标为(${Inx},${Iny})`
                }
            }
        }
    </script>
</body>
</html>